<script setup lang="ts">
import { RouterLink, RouterView } from 'vue-router'
import { useUserStore } from '@/stores/user'
import HotelSearchForm from '@/components/HotelSearchForm.vue'
import RecommendedHotels from '@/components/RecommendedHotels.vue'
import { ElMessage } from 'element-plus'

const userStore = useUserStore()

const handleSearch = (searchData: any) => {
  console.log('搜索数据:', searchData)
  ElMessage.success('搜索功能已触发！')
}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <!-- 固定导航栏 -->
      <el-header class="header">
        <nav class="nav-bar">
          <!-- Logo -->
          <img src="../images/logo.png" class="logo" />

          <!-- 搜索框 -->
          <div class="search-box">
            <el-input
              v-model="input1"
              size="large"
              placeholder="Please Input"
              :suffix-icon="Search"
            />
            <el-button type="primary" size="large" class="search-btn">搜索</el-button>
          </div>

          <!-- 导航栏 -->
          <div class="nav-links">
            <RouterLink to="/home">首页</RouterLink>
            <template v-if="userStore.isLoggedIn">
              <RouterLink to="/my">我的</RouterLink>
              <RouterLink to="/my-orders">我的订单</RouterLink>
              <el-button type="text" @click="userStore.logout()">退出</el-button>
            </template>
            <template v-else>
              <RouterLink to="/login">登录</RouterLink>
            </template>
          </div>
        </nav>
      </el-header>

      <!-- 主要内容区域 -->
      <el-main class="main-content">
        <!-- 酒店搜索表单 -->
        <HotelSearchForm @search="handleSearch" />
        
        <!-- 推荐酒店 -->
        <RecommendedHotels />
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header {
  position: fixed;          /* 固定在顶部 */
  top: 0;
  left: 0;
  width: 100%;
  height: 80px;
  background-color: antiquewhite;
  display: flex;
  align-items: center;      /* 垂直居中 */
  z-index: 1000;            /* 避免被内容覆盖 */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); /* 添加阴影 */
}

.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 左中右分布 */
  width: 90%;
  margin: 0 auto;
}

.logo {
  width: 120px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  justify-content: center;
}

.search-box .el-input {
  width: 240px;
}

.nav-links {
  display: flex;
  gap: 20px;
}

.nav-links a {
  text-decoration: none;
  font-size: 18px;
  color: #333;
  transition: color 0.3s;
}

.nav-links a:hover {
  color: #409eff;
}

/* 主要内容区域 */
.main-content {
  margin-top: 80px;                /* 给导航栏腾出空间 */
  min-height: calc(100vh - 80px);  /* 最小高度 */
  width: 100%;
  padding: 0;
  background-color: #f5f7fa;
}
</style>
